<template>
  <view>
    <text class="text">温馨提示：具体病症即检查结果以医院出具检查报告为准</text>
    <scroll-view class="scroll">
    <view class="question-container" v-for="(question, index) in state.questions" :key="index"> 
      <text class="question">{{ index+1 }}.{{ question.content }}</text>
      <view class="border"></view>  
      <radio-group class="radio-group" @change="handleRadioChange(index, question,$event.target.value)">  
        <label class="radio-label" v-for="(option,index_option) in options" :key="option.value">  
          <radio :value="option.value" :checked="index_option === current"/>
          <text>{{ option.label}}</text>
          <text v-if="index_option === 0">{{'('+ question.score+')' }}</text>
          <text v-else>{{'('+0+')' }}</text>
        </label>  
      </radio-group>  
    </view>
    <text class="text">评分规则：如果总分大于4分即存在跌倒风险!!</text>
    <view class="result" v-if="isResultView">
      <view class="title">评判结果:</view>
      <view v-if="(scoreTotal<=4)" class="unRisk">你的评判分数为:{{ scoreTotal }}，暂无任何跌倒风险</view>
      <view v-else class="risk">你的评判分数为:{{ scoreTotal }}，有跌倒风险</view>
    </view>  
    <view>
      <button @tap = "submit" class="submit">提交</button>
    </view>
  </scroll-view>
  </view>
</template>

<script setup lang="ts">
import {ref,reactive,computed} from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import {getFallRiskSelfApi,postFallRiskSelfApi} from '@/apis/fallRisk/fallRiskSelf'
import {useMarkStore} from '@/stores/modules/mark'
const useMark = useMarkStore()
const uuid = ref(0)
const uuid1 = ref(0)
const uuid2 = ref(0)
const getUuid =async ()=>{
 const res = await wx.getRandomValues({length: 12 })
 uuid.value = wx.arrayBufferToBase64(res.randomValues)
 const res1 = await wx.getRandomValues({length: 12 })
 uuid1.value = wx.arrayBufferToBase64(res.randomValues)
 uuid2.value=uuid1.value+uuid.value
 console.log('uuid:',uuid2.value)
 useMark.setMark(uuid2.value)
 console.log('我是每次测评存储到本地的mark：',useMark.mark)
}
const current = ref(1)
const state = reactive({
  questions:[]
})
const selected=[]
const options = reactive([
  {value:'yes',label:'是'},
  {value:'no',label:'否'},
])
const scoreTotal = ref(0)
const handleRadioChange = (index,question,targetValue)=>{
  if(targetValue==='yes')
  {
    selected[index].result=1
    scoreTotal.value +=question.score 
  }
  else{
    selected[index].result=0
    scoreTotal.value -=question.score
  }
}
const isResultView = ref(false)
const submit =async ()=>{//提交触发回调函数
  console.log('问题：',selected)
  console.log('你当前的总分为：',scoreTotal.value)
  const res =await postFallRiskSelfApi(selected)
  isResultView.value = true
  console.log(res.msg)
}

const questionObject = {mark:uuid2.value,tsBaseEvaluateId:'0',result:0}
const getFallRiskSelfData = async ()=> {
  const res = await getFallRiskSelfApi()
  console.log('我是自评表数据',res.data)
  state.questions=res.data
  if(res.code===200){
     setSelected()
  }
  console.log(state.questions,'我是返回的表数据')
}
 onLoad(()=>{
  getFallRiskSelfData(),
  getUuid()

})
const setSelected = ()=>{
  for(let i=0;i<state.questions?.length;i++)
{
  selected.push({mark:uuid2.value,tsBaseEvaluateId:state.questions[i]?.id,result:0})
}
console.log('我是seleted',selected) 
}

</script>

<style lang="scss" scoped>
.text{
  font-size: 25rpx;
  color:red;
  margin-left: 50rpx;
  margin-top: 30rpx;
}
.scroll{
  margin-top: 20rpx;
.question-container {  
  margin-bottom: 40rpx;/* 每个问题之间的间距 */  
.question {   
  margin-bottom: 40rpx; 
  margin-left: 50rpx;
}  
.border{
  height: 3rpx;
  width: 600rpx;
  background-color: #eee;
  margin-top: 30rpx;
  margin-left: 50rpx;
}
.radio-group {   
  margin-left: 50rpx;
.radio-label {   
  padding-top: 30rpx; 
  padding-right: 200rpx; 
}  
}
}
.submit{
  background-color: rgb(73,115,255);
  color:white;
  height: 80rpx;
  line-height: 80rpx;
  margin: 30rpx 20rpx;
  border-radius: 80rpx;
  font-size: 30rpx;
}
.result{
  background-color: rgb(240,247,255);
  height: 200rpx;
  margin: 30rpx;
  .title{
    font-weight: bold;
    font-size: 30rpx;
    color: black;
    margin: 15rpx;
    padding: 15rpx;
  }
  .unRisk{
    color: rgb(9,191,98);
    font-weight: bold;
    font-size: 30rpx;
    margin-left: 20rpx;
  }
  .risk{
    color: red;
    font-weight: bold;
    font-size: 30rpx;
    margin-left: 20rpx;
  }

}
}
</style>